<template>
  <div class="container-box">
    <h2>角色管理</h2>&nbsp;
    <span>用于系统角色的管理，并且对角色进行授权管理</span>
    <!--筛选表单-->
    <div class="filter-form">
      <el-form ref="form" label-width="80px" :inline="true" size="small" label-position="top">
        <el-form-item label="角色名称">
          <el-input v-model.trim="queryData.name" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="状态">
          <SelectOption :query-data="queryData" />
        </el-form-item>
        <el-form-item class="position">
          <el-button icon="el-icon-refresh" @click="onSearchReset">重置</el-button>
          <el-button icon="el-icon-search" type="primary" @click="onSearchSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表单区域-->
    <div class="table-box">
      <!--操作区域-->
      <el-row type="flex" justify="end" class="tool-bar">
        <div>
          <el-button
            v-permission="'rolecreate'"
            type="primary"
            size="small"
            @click="$refs.Dialog.drawer=true"
          >新增角色</el-button>
        </div>
      </el-row>
      <el-table
        :header-cell-style="{
          background: '#fafafa'}"
        :data="list"
        row-key="id"
      >
        <!-- prop表示这一列展示哪个数据 -->
        <el-table-column width="200%" prop="id" label="ID">
          <!-- <template slot-scope="scope">
            <i class="el-icon-remove-outline" />
            <span>{{ scope.row.title }}</span>
          </template> -->
        </el-table-column>
        <el-table-column prop="name" label="角色名称" />
        <el-table-column prop="description" label="角色描述" />
        <el-table-column prop="status" label="状态">
          <template slot-scope="{row}">
            <span>{{ row.status === 1 ? '启用' : '关闭' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              v-permission="'roleupdate'"
              size="small"
              type="text"
              @click="$refs.Dialog.reviewInfo(row.id)"
            >编辑</el-button>

            <el-popconfirm

              title="确定删除吗?"
              @confirm="delRow(row.id)"
            >
              <el-button
                slot="reference"
                v-permission="'roledestroy'"
                size="small"
                type="text"
              >删除</el-button>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
      <!--分页区域-->
      <div class="page">
        <el-pagination
          :current-page.sync="queryData.current"
          :page-size="queryData.pageSize"
          layout="slot, prev, pager, next"
          :total="total"
          background
          small
          @size-change="sizeChange"
          @current-change="currentChange"
        >
          <!-- <span key="1" class="slot">第1-{{ total % queryData.pageSize === 0 ? total : total % queryData.pageSize }}条/总共{{ total }}条</span> -->
          <!-- <span key="1" class="slot">第1-{{ total > 10 ? total % queryData.pageSize : tot }}条/总共{{ total }}条</span> -->
        </el-pagination>
      </div>
    </div>

    <!-- 弹框区域 -->
    <!-- <el-dialog :title="`${title}分类`" :visible.sync="dialogShow" width="40%" @close="btnCancel">
      <el-form ref="form" :model="formData" :rules="formRules" label-width="120px" size="normal">
        <el-form-item label="分类名称" prop="catename">
          <el-input v-model="formData.catename" />
        </el-form-item>
        <el-form-item label="分类图标" prop="icon">
          <el-input v-model="formData.icon" style="width: 160px;" />
          图标参加xxx
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="formData.sort_num" :min="1" :max="10" />
        </el-form-item>
      </el-form>
      <el-form ref="form" :model="formData" :rules="formRules" label-width="80px" size="normal">
        <el-form-item label="标签名称" prop="tagname">
          <el-input v-model="formData.tagname" style="width: 80%;" />
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button type="primary" size="small" @click="btnOk">确定</el-button>
        <el-button size="small" @click="dialogShow=false">取消</el-button>
      </el-row>
    </el-dialog> -->
    <Dialog ref="Dialog" @updateList="initData" />
  </div>
</template>
<script>
// import { getTagList, addTag, editTag, getTagInfo, delTag } from '@/api/tag'
import { getRoleListAPI, delRoleAPI } from '@/api/role'
import SelectOption from '@/views/auth/components/select-option.vue'
import Dialog from './components/Dialog.vue'

export default {
  name: 'Tag',
  components: {
    SelectOption, Dialog
  },
  data() {
    return {
      list: [],
      ye: '',
      queryData: {
        current: 1,
        pageSize: 10,
        name: '',
        create_time: ''
      },
      formData: {
        tagname: '',
        id: 0,
        default_data: 0
      },
      formRules: {
        tagname: [{ required: true, message: '请输入标签名称', trigger: 'blur' }]
      },
      // 总数
      total: 0,
      // 控制弹框的显示
      dialogShow: false
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改' : '添加'
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 获取数据
    async initData() {
      const res = await getRoleListAPI(this.queryData)
      this.list = res.data.rows
      this.list = this.list.map(item => {
        item.create_time = this.$moment(item.create_time).format('YYYY/MM/DD HH:mm:ss')
        return item
      })
      this.total = res.data.count
      console.log(res)
    },
    // 筛选表单搜索条件
    onSearchSubmit() {
      this.queryData.current = 1
      this.initData()
    },
    // 筛选表单重置
    onSearchReset() {
      this.queryData = {
        current: 1,
        pageSize: 10,
        name: '',
        create_time: ''
      }
      this.initData()
    },
    // 每页数量切换事件
    sizeChange(val) {
      // console.log(val)
      // this.queryData.limit = val
      // this.initData()
    },
    // 页码切换事件
    currentChange(val) {
      console.log(val)
      // this.queryData.page = val
      this.initData()
    },
    // 新增/修改标签
    async btnOk() {
      // await this.$refs.form.validate()
      // this.$message.success(this.formData.id ? '修改标签成功' : '添加标签成功')
      // this.dialogShow = false
      // this.initData()
    },
    // 清空表单和校验
    btnCancel() {
      this.formData = {
        // catename: '',
        // icon: '',
        // sort_num: 10
      }
      // this.$refs.form.clearValidate()
    },
    // 修改标签
    async editRow(id) {
      // this.formData.id = id
      // this.dialogShow = true
    },
    // 删除标签
    async delRow(id) {
      await delRoleAPI(id)
      this.$message.success('删除成功')
      if (this.queryData.current > 1 && this.list.length === 1) {
        this.queryData.current--
      }
      this.initData()
    }
  }
}
</script>
<style lang="scss" scoped>

h2 {
  display: inline-block;
}
.container-box{
  padding: 30px;
}
.filter-form,
.tool-bar{
  margin-bottom: 10px;
}
.table-box {
  position: relative;
  background-color: #fff;
  padding: 30px;
  padding-bottom: 50px;
}
// ::v-deep .el-table__header-wrapper {
//   background-color: rgb(250, 250, 250)!important;
// }
// scss 代码
::v-deep .el-table .el-table__expand-icon .el-icon-arrow-right:before {
  content: "\e723";
  font-size: 16px;
}
::v-deep .el-table .el-table__expand-icon .el-icon-arrow-right:hover {
  color: rgb(146, 188, 255);
}
::v-deep .el-table .el-table__expand-icon--expanded {
  transform: rotate(0);
  .el-icon-arrow-right:before {
    content: "\e722";
    font-size: 16px;
  }
}
svg {
  font-size: 18px;
}
.showname {
  position: absolute;
  z-index: 9999;
  top: 23px;
  left: 16px;
  color: #fff;
  font-size: 12px;
}
.hidename {
  display: none;
}
.el-button+.el-button {
  margin-left: 0;
  margin-right: 10px;
}
button, html [type="button"] {
  margin-right: 10px;
}
.filter-form {
  position: relative;
  background-color: #fff;
  padding: 15px 10px;
}
.position {
  position: absolute;
  top: 45%;
  right: 0;
}
.page {
  position: absolute;
  bottom: 10px;
  right: 30px;
}
.slot {
  margin-right: 5px;
  font-size: 12px;
  font-weight: 400;
}
</style>
